<template>
  <h1>侦听器</h1>
  <hr>
  <h2>原价:{{ price }} <button @click="price=800">修改原价</button></h2>
  <h2>会员价:{{ vipPrice }}</h2>

  <button @click="appName = '李四'">修改名字:{{ appName }}</button>

  <hr>

  <ul>
    <li>id:{{ obj.id }}</li>
    <li>age:{{ obj.age }}</li>
    <button @click="obj.age++">增加年龄</button>
  </ul>
</template>

<script setup>
import { ref,watch,reactive } from "vue"

const price = ref(1000)
const vipPrice = ref(0)

const appName = ref("张三")

const obj = reactive({
  id:"QF0001",
  age:18
})

// 组合式api中监听多个值比较方便
watch([price,appName],()=>{
  console.log("当前侦听器会在 price/appName的值发生变化的时候执行");
  vipPrice.value = price.value / 2
  
})

watch(obj,()=>{
  console.log("当前obj侦听器执行~~~~~");
},{immediate:true})
// immediate:true 页面一打开就执行
</script>